<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<title>注册</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/tailwindcss" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
	<script src="https://cdn.tailwindcss.com"></script>

	<!-- Tailwind 配置 -->
	<script>
		tailwind.config = {
			theme: {
				extend: {
					colors: {
						primary: '#165DFF',
						secondary: '#36CFC9',
						accent: '#FF7D00',
						dark: '#1D2129',
						light: '#F2F3F5',
						'primary-light': '#4080FF',
						'primary-dark': '#0E42D2',
					},
					fontFamily: {
						inter: ['Inter', 'system-ui', 'sans-serif'],
					},
					animation: {
						'fade-in': 'fadeIn 0.5s ease-in-out',
						'slide-up': 'slideUp 0.5s ease-out',
						'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
					},
					keyframes: {
						fadeIn: {
							'0%': { opacity: '0' },
							'100%': { opacity: '1' },
						},
						slideUp: {
							'0%': { transform: 'translateY(20px)', opacity: '0' },
							'100%': { transform: 'translateY(0)', opacity: '1' },
						}
					}
				}
			}
		}
	</script>

	<style type="text/tailwindcss">
		@layer utilities {
			.content-auto {
				content-visibility: auto;
			}
			.card-shadow {
				box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
			}
			.card-shadow-hover {
				transition: all 0.3s ease;
			}
			.card-shadow-hover:hover {
				box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
				transform: translateY(-2px);
			}
			.btn-hover {
				transition: all 0.2s ease;
			}
			.btn-hover:hover {
				transform: translateY(-1px);
			}
			.bg-gradient-blue {
				background: linear-gradient(135deg, #165DFF 0%, #4080FF 100%);
			}
			.text-shadow {
				text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			}
			.animate-on-scroll {
				opacity: 0;
				transform: translateY(20px);
				transition: opacity 0.6s ease-out, transform 0.6s ease-out;
			}
			.animate-on-scroll.visible {
				opacity: 1;
				transform: translateY(0);
			}
		}
	</style>
</head>
<body class="font-inter bg-gray-50 min-h-screen flex flex-col">
<div id="wrap" class="w-full max-w-6xl mx-auto my-8 bg-white rounded-2xl shadow-xl overflow-hidden animate-fade-in">
	<!-- 头部区域 -->
	<div id="top_content">
		<div id="header" class="bg-gradient-blue text-white p-6 md:p-8 relative overflow-hidden">
			<!-- 装饰元素 -->
			<div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -translate-y-1/2 translate-x-1/4 blur-3xl"></div>
			<div class="absolute bottom-0 left-0 w-48 h-48 bg-white/10 rounded-full translate-y-1/2 -translate-x-1/4 blur-3xl"></div>

			<div class="relative z-10 flex flex-col md:flex-row justify-between items-center">
				<div id="topheader" class="mb-4 md:mb-0">
					<h1 id="title" class="text-2xl md:text-3xl font-bold tracking-tight text-shadow">
						<a href="#" class="flex items-center">
							<i class="fa fa-building-o mr-2"></i>
							<span>员工管理系统</span>
						</a>
					</h1>
				</div>

				<div id="rightheader" class="text-right">
					<p class="text-sm md:text-base">
						<i class="fa fa-calendar-o mr-1"></i> 2025/5/20
						<br />
					</p>
				</div>
			</div>

			<!-- 导航栏 -->
			<div id="navigation" class="mt-4 bg-white/10 backdrop-blur-sm rounded-lg overflow-hidden">
				<ul class="flex flex-wrap p-2">
					<li class="mr-4 mb-2">
						<a href="#" class="px-3 py-1.5 rounded-md text-white hover:bg-white/20 transition-colors duration-200 flex items-center">
							<i class="fa fa-home mr-1"></i> 首页
						</a>
					</li>
					<li class="mr-4 mb-2">
						<a href="#" class="px-3 py-1.5 rounded-md text-white hover:bg-white/20 transition-colors duration-200 flex items-center">
							<i class="fa fa-user mr-1"></i> 个人中心
						</a>
					</li>
					<li class="mr-4 mb-2">
						<a href="#" class="px-3 py-1.5 rounded-md text-white hover:bg-white/20 transition-colors duration-200 flex items-center">
							<i class="fa fa-cog mr-1"></i> 设置
						</a>
					</li>
				</ul>
			</div>
		</div>

		<!-- 内容区域 -->
		<div id="content" class="p-6 md:p-8">
			<p id="whereami" class="text-sm text-gray-500 mb-4">
				<a href="#" class="text-primary hover:underline">首页</a> &raquo; 注册
			</p>

			<h1 class="text-2xl md:text-3xl font-bold text-primary mb-6 pb-2 border-b border-gray-100">
				<i class="fa fa-user-plus mr-2"></i>注册
			</h1>

			<!-- 注册表单 -->
			<div class="bg-white rounded-xl shadow-md p-6 md:p-8 max-w-2xl mx-auto card-shadow-hover">
				<form th:action="@{/user/regist}" method="post" class="space-y-6">
					<div class="grid grid-cols-1 md:grid-cols-12 gap-6">
						<div class="md:col-span-3 flex items-center justify-end">
							<label for="username" class="text-gray-700 font-medium">用户名:</label>
						</div>
						<div class="md:col-span-9">
							<div class="relative">
                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                                        <i class="fa fa-user"></i>
                                    </span>
								<input type="text" id="username" class="inputgri w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all duration-200" name="username" placeholder="请输入用户名">
							</div>
						</div>
					</div>

					<div class="grid grid-cols-1 md:grid-cols-12 gap-6">
						<div class="md:col-span-3 flex items-center justify-end">
							<label for="realname" class="text-gray-700 font-medium">真实姓名:</label>
						</div>
						<div class="md:col-span-9">
							<div class="relative">
                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                                        <i class="fa fa-id-card"></i>
                                    </span>
								<input type="text" id="realname" class="inputgri w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all duration-200" name="realname" placeholder="请输入真实姓名">
							</div>
						</div>
					</div>

					<div class="grid grid-cols-1 md:grid-cols-12 gap-6">
						<div class="md:col-span-3 flex items-center justify-end">
							<label for="password" class="text-gray-700 font-medium">密码:</label>
						</div>
						<div class="md:col-span-9">
							<div class="relative">
                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                                        <i class="fa fa-lock"></i>
                                    </span>
								<input type="password" id="password" class="inputgri w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all duration-200" name="password" placeholder="请输入密码">
							</div>
						</div>
					</div>

					<div class="grid grid-cols-1 md:grid-cols-12 gap-6">
						<div class="md:col-span-3 flex items-center justify-end">
							<label class="text-gray-700 font-medium">性别:</label>
						</div>
						<div class="md:col-span-9 flex items-center space-x-6">
							<label class="inline-flex items-center cursor-pointer">
								<input type="radio" class="form-radio h-5 w-5 text-primary" name="gender" value="1" checked>
								<span class="ml-2 text-gray-700">男</span>
							</label>
							<label class="inline-flex items-center cursor-pointer">
								<input type="radio" class="form-radio h-5 w-5 text-primary" name="gender" value="0">
								<span class="ml-2 text-gray-700">女</span>
							</label>
						</div>
					</div>

					<div class="grid grid-cols-1 md:grid-cols-12 gap-6">
						<div class="md:col-span-3 flex items-center justify-end">
							<label class="text-gray-700 font-medium">验证码:</label>
						</div>
						<div class="md:col-span-9 flex flex-col sm:flex-row gap-4">
							<div class="relative flex-grow">
                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                                        <i class="fa fa-shield"></i>
                                    </span>
								<input type="text" class="inputgri w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all duration-200" name="code" placeholder="请输入验证码">
							</div>
							<div class="flex items-center">
								<img id="num" th:src="@{/user/generateImageCode}" class="h-12 w-36 rounded-lg border border-gray-200 object-cover cursor-pointer hover:opacity-90 transition-opacity duration-200 animate-fade-in" />
								<a href="javascript:;" onclick="changeImageCode()" class="ml-3 text-primary hover:text-primary-dark transition-colors duration-200 flex items-center">
									<i class="fa fa-refresh mr-1"></i> 换一张
								</a>
							</div>
						</div>
					</div>

					<div class="flex flex-col sm:flex-row justify-center sm:justify-end gap-4 pt-4">
						<input type="submit" class="button bg-gradient-blue hover:from-primary-dark hover:to-primary-light text-white font-medium py-3 px-8 rounded-lg transition-all duration-200 btn-hover flex items-center justify-center" value="立即注册 &raquo;">
						<a href="login" class="py-3 px-4 text-primary hover:text-primary-dark transition-colors duration-200 flex items-center justify-center">
							<i class="fa fa-sign-in mr-1"></i> 已有账号,返回登录
						</a>
					</div>
				</form>
			</div>
		</div>
	</div>

	<!-- 页脚区域 -->
	<div id="footer" class="bg-gradient-blue text-white p-6">
		<div id="footer_bg" class="flex flex-col md:flex-row justify-between items-center">
			<div class="mb-4 md:mb-0">
				<p class="text-sm">© 2025 员工管理系统</p>
			</div>
			<div class="flex space-x-4">
				<a href="#" class="text-white hover:text-light transition-colors duration-200">
					<i class="fa fa-envelope"></i>
				</a>
				<a href="#" class="text-white hover:text-light transition-colors duration-200">
					<i class="fa fa-phone"></i>
				</a>
				<a href="#" class="text-white hover:text-light transition-colors duration-200">
					<i class="fa fa-weixin"></i>
				</a>
				<a href="#" class="text-white hover:text-light transition-colors duration-200">
					<i class="fa fa-weibo"></i>
				</a>
			</div>
		</div>
	</div>
</div>

<script>
	// 验证码刷新功能
	function changeImageCode() {
		const img = document.getElementById('num');
		img.classList.add('opacity-50');
		img.src = '[[@{/user/generateImageCode}]]?' + (new Date()).getTime();

		// 添加动画效果
		setTimeout(() => {
			img.classList.remove('opacity-50');
			img.classList.add('animate-pulse-slow');
			setTimeout(() => {
				img.classList.remove('animate-pulse-slow');
			}, 1000);
		}, 200);
	}

	// 平滑滚动
	document.querySelectorAll('a[href^="#"]').forEach(anchor => {
		anchor.addEventListener('click', function (e) {
			e.preventDefault();

			document.querySelector(this.getAttribute('href')).scrollIntoView({
				behavior: 'smooth'
			});
		});
	});
</script>
</body>
</html>